<template>
  <el-card>
    <el-calendar v-model="value">
      <div slot="dateCell" slot-scope="{ data }" @click="allcalendar(data)" class="temp">
        <div>
          {{ data.day.split("-").slice(2).join("-") }}
        </div>
        <div v-for="(item, index) in dataList" :key="index" style="text-align: center;font-size:20px;">
          <div v-if=" item.dateTime == data.day ">
            <div v-if="data.day < currentDate">
              <el-badge class="mark" :value="item.maintWorkNum" />
              <!-- {{item.maintWorkNum}}个 -->
            </div>
            <div v-else>
              <el-badge class="mark" :value="item.maintWorkNum" type="primary" />
              <!-- {{item.maintWorkNum}}个 -->
            </div>
          </div>
        </div>

      </div>
    </el-calendar>
    <el-dialog title="详细列表" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
      <el-card>
        *不能编辑日期的电梯，为已经生成工单的电梯或者是原来的计划
      </el-card>
      <el-card style="margin-top:15px">
        <el-table :data="temData" style="width: 100%" :header-cell-style="{ 
      fontWeight:800}">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="使用单位" prop="useOrgName">
          </el-table-column>
          <el-table-column prop="eleUseCommunity" label="地址">
          </el-table-column>
          <el-table-column prop="maintType" label="维保类型">
          </el-table-column>
          <el-table-column label="计划日期" width="250">
            <template slot-scope="scope">
              <span v-if="scope.row.planTime.substring(0, 10)<newDate">{{scope.row.planTime.substring(0, 10)}}</span>
              <el-date-picker v-else v-model="scope.row.planTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="danger" @click="getSure(scope.row)">确定</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
          :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal"
          align='right'>
        </el-pagination>
      </el-card>
    </el-dialog>
  </el-card>
</template>

<script>
import { getselectMaintCalendar, getselectMaintCalendarDetail, getdoMaintPlanUpdate } from '@/api/work'
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      temData: [],
      value: new Date(),
      newDate: '',
      dataList: [],
      currentDate: '',
      dialogVisible: false,
      dateTime: '',
      updateTime: ''

    }
  },
  mounted () {

    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      )
      prevBtn.addEventListener("click", () => {
        this.getDateList(this.value)
      })
      let dayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      )
      dayBtn.addEventListener("click", () => {
        this.getDateList(this.value)
      })
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      )
      nextBtn.addEventListener("click", () => {
        this.getDateList(this.value)
      })
    })
    this.currentDate = this.getNowFormatDate()
    this.getDateList()
  },
  methods: {
    handleClose () {
      this.getDateList()
      this.dialogVisible = false
    },
    getSure (rows) {
      if (rows.planTime) {
        getdoMaintPlanUpdate({
          planId: rows.planId,
          updateTime: rows.planTime.substring(0, 10)
        }).then(res => {
          console.log(res)
          if (res.data.code == '200') {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '计划日期不能为空!'
        })
      }

    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      console.log(this.value)
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      let date = this.value
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      date = y + '-' + m + '-' + d
      this.gettableData(date)
    },
    // 日历触发事件
    allcalendar (data) {
      this.value = data.day //取到你需要的日期data.day
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      date = y + '-' + m + '-' + d
      this.newDate = date
      //需要用到这日期做啥事，比如做为调接口的参数
      this.dataList.map((item) => {
        if (this.value == item.dateTime) {
          this.dialogVisible = true
          this.gettableData(this.value)
        }
      })

    },
    gettableData (date) {
      getselectMaintCalendarDetail({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        timeDate: date
      }).then(res => {
        if (res.data.code == 200) {
          this.temData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    // 获取当前月份信息
    getDateList () {
      var value = this.value
      var Year = value.getFullYear()
      var Month = value.getMonth() + 1
      var Day = value.getDate()
      var MonthVal = Month >= 10 ? Month : "0" + Month
      var DayVal = Day >= 10 ? Day : "0" + Day
      var values = Year + "-" + MonthVal + "-" + DayVal
      var schoolDate = values.split("-").slice(0, 2).join("-")
      const query = {
        nowDate: schoolDate
      }
      getselectMaintCalendar(query).then((res) => {
        if (res.data.code == '200') {
          this.dataList = res.data.data
        }
      })
    },
  }
}

</script>

<style lang="scss" scoped>
::v-deep .el-badge__content {
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
::v-deep .el-calendar-table:not(.is-range) td.next,
::v-deep .el-calendar-table:not(.is-range) td.prev {
  visibility: hidden;
}
.temp {
  height: 100%;
}
</style>

